<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="del">-</button>
        <!-- 注意，鼠标事件等属性全部写成小写字母，不用驼峰命名 -->
        <div @mouseenter="clear" @mouseout = "start">
            <!-- 注意： ：src 是 v-bind 的缩写 -->
            <img :src="swiperList.length > 0?swiperList[count].image_src:''" alt="">
        </div>

        <div>
            <ul>
                <li v-for="(item,index) in  swiperList" @click="changeCount(index)">
                    <img width="30px" :src="item.image_src" alt="">
                </li>
            </ul>
        </div>
        <button @click="add">+</button>

    </div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../vue.js"></script>

    <script>
        new Vue({
            el: "#app",
            data: {
                swiperList: [],
                count: 0,
                timer: null
            },
            created() {
                //放进去请求路径之后， swiperList: [] 列表就会有三张轮播图的图片
                axios.get('https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata').then(res => {
                    this.swiperList = res.data.message
                })

                // this.timer = setInterval(() => {
                //     this.add()
                // }, 2000)
                this.init()
            },
          
            methods: {
                
                // 类似于面对对象编程的思维
                init() {
                    this.timer = setInterval(() => {
                        this.add()
                        // clearInterval()  //清除之前的定时器
                    }, 2000)
                },

                add() {
                    if (this.count === this.swiperList.length - 1) {
                        this.count = 0
                        console.log(this); // 这里的this指向Vue对象
                    } else {
                        this.count += 1
                    }
                },
                // 下面的代码是为了 减号按钮
                del() {
                    if (this.count === 0) {
                        this.count = this.swiperList.length - 1
                        console.log(this); // 这里的this指向Vue对象
                    } else {
                        this.count -= 1
                    }
                },
                changeCount(index) {
                    this.count = index
                },
                clear() {
                    clearInterval(this.timer)
                },
                start() {
                    this.init()
                }
            },
        })
    </script>
</body>

</html>